<template>
  <van-divider />
  <div class="music-title">
    <van-row justify="space-between">
      <van-col span="18">{{ title }}</van-col>
      <van-col span="6" class="more" v-if="showMore">
        <router-link v-if="moreLink" :to="moreLink">
          <van-button size="mini" plain round>更多 ></van-button>
        </router-link>
        <van-button size="mini" plain round v-else>更多 ></van-button>
      </van-col>

      <!-- 插槽 -->
      <van-col span="6" class="more" v-else>
        <slot name="btn"></slot>
      </van-col>
    </van-row>
  </div>
</template>

<script setup>
import { reactive, toRefs, ref } from 'vue'
defineProps({
  title: {
    default: ''
  },
  showMore: {
    default: false
  },
  moreLink: {
    default: ''
  }
})

</script>
  
<style lang='less' scoped>
.music-title {
  font-size: 40px;

  .more {
    font-size: 20px;
    text-align: right;
  }
}
</style>